<template>
  <el-dialog
    v-el-drag-dialog
    append-to-body
    title="预付卡"
    :visible.sync="visible"
    width="600px"
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" :model="temp" :rules="rules" label-position="right" label-width="100px" style="margin: 0 50px;">
      <el-form-item label="卡号:">
        <el-input v-model="temp.cardCode" disabled />
      </el-form-item>
      <el-form-item label="余额:" prop="cardSurplus">
        <el-input v-model="cardSurplus" disabled />
      </el-form-item>
      <el-form-item v-show="checkWay === 1" label="预付卡密码:" prop="passWord" class="block">
        <el-input v-model="temp.passWord" type="password" :minlength="6" :maxlength="6" autocomplete="off" />
      </el-form-item>
      <el-form-item v-show="checkWay === 2" label="手机号:" prop="phone">
        <el-input v-model="phone" placeholder="请输入手机号">
          <el-button slot="append" class="append-search" :disabled="btn_disabled" @click="sendMessageCode">{{ btn_text }}</el-button>
        </el-input>
      </el-form-item>
      <el-form-item v-show="checkWay === 2" class="yzm-form-item" prop="messageCode" label="验证码:">
        <el-input v-model="temp.messageCode" placeholder="请输入验证码" :minlength="6" :maxlength="6" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button plain @click="changeCheckWay">{{ checkWay === 1 ? '切换手机验证码校验' : '切换密码校验' }}</el-button>
      <el-button @click="visible = false">
        取消
      </el-button>
      <el-button :loading="$loadingPlugin.submit" type="primary" @click="success">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { queryCheckCsmCard, querySendMessage } from '@/api'
  import { accDiv } from '@/utils/math'
  import { isWildPhone } from '@/utils/index'

  export default {
    name: 'prepaid-card',
    data() {
      const validatePass = (rule, value, callback) => {
        if (this.checkWay === 1) {
          if (value === '') {
            callback(new Error('请输入预付卡密码'))
          } else {
            if (value.length !== 6) {
              callback(new Error('请输入6位预付卡密码'))
            }
            callback()
          }
        }
        callback()
      }
      const validateCode = (rule, value, callback) => {
        if (this.checkWay === 2) {
          if (value === '') {
            callback(new Error('请输入验证码'))
          } else {
            if (value.length !== 6) {
              callback(new Error('请输入6位验证码'))
            }
            callback()
          }
        }
        callback()
      }
      return {
        visible: false,
        checkWay: 0, // 0表示无校验 1表示密码校验 2表示验证码校验
        countdown: 60, // 发送验证码时间60秒
        startSendMessageCode: 0, // 初始化为0
        phone: '',
        btn_disabled: false, // 获取验证码按钮是否禁用
        btn_text: '获取验证码', // 获取验证码按钮的文字
        timer: null,
        temp: {
          cardCode: '',
          cardSurplus: '',
          passWord: '',
          messageCode: ''
        },
        rules: {
          passWord: [{ validator: validatePass, trigger: 'blur' }],
          messageCode: [{ validator: validateCode, trigger: 'blur' }]
        }
      }
    },
    computed: {
      cardSurplus: function() {
        return this.temp.cardSurplus ? accDiv(Number(this.temp.cardSurplus), 100).toFixed(2) : ''
      }
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
            if (temp.accCsmCardConfigInfo.checkWay === 1) this.checkWay = 0
            else if (temp.accCsmCardConfigInfo.checkWay === 2 || temp.accCsmCardConfigInfo.checkWay === 4) this.checkWay = 1
            else if (temp.accCsmCardConfigInfo.checkWay === 3) this.checkWay = 2
          }
        })
      },
      // 切换校验方式
      changeCheckWay() {
        if (this.checkWay === 1) this.checkWay = 2
        else this.checkWay = 1
      },
      // 发送验证码60秒倒计时
      async sendMessageCode() {
        if (!this.phone || !isWildPhone(this.phone)) {
          this.$message.warning('请输入正确的电话号码!')
          return
        }
        if (this.startSendMessageCode === 0) {
          this.startSendMessageCode === 1
          await querySendMessage({
            csmPhone: this.phone,
            type: 1
          })
          this.settime()
        }
      },
      settime() {
        const _this = this
        if (this.countdown === 0) {
          this.$set(this, 'btn_disabled', false)
          this.$set(this, 'btn_text', '获取验证码')
          this.countdown = 60
          this.startSendMessageCode === 0
          return
        } else {
          this.$set(this, 'btn_disabled', true)
          this.$set(this, 'btn_text', `重新发送(${this.countdown})`)
          this.countdown--
        }
        this.timer = setTimeout(function() {
          _this.settime()
        }, 1000)
      },
      success() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          const params = {
            cardCode: this.temp.cardCode,
            passWord: this.temp.passWord,
            messageCode: this.temp.messageCode
          }
          this.submit(params)
        })
      },
      async submit(params) {
        await queryCheckCsmCard(params)
        this.resolve(true)
        this.visible = false
      },
      reset() {
        this.timer = null
        this.checkWay = 0
        this.countdown = 60
        this.startSendMessageCode = 0
        this.temp = {
          cardCode: '',
          cardSurplus: '',
          passWord: '',
          messageCode: ''
        }
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
